<template>
	<view class="height-screen">
		<cu-custom></cu-custom>
		<view class="grid" style="margin-top: 170rpx;gap: 50rpx; margin:100rpx 40rpx 0;">
			<view class="flex justify-center align-center" style="margin-bottom: 80rpx;">
				<image src="@/static/img/logo.png" style="width: 160rpx;height: 160rpx;" />
			</view>
			<u-form labelPosition="top" labelWidth="90">
				<u-form-item :label="$t('login.account')" borderBottom>
					<text style="margin-right: 20rpx;">+61</text>
					<u-input v-model="mobile" border="none" :placeholder="$t('login.placeholderAccount')"></u-input>
				</u-form-item>
				<u-form-item :label="$t('login.code')" borderBottom>
					<u-input :placeholder="$t('login.placeholderCode')" border="none" clearable v-model="captcha"
						type="number">
						<!-- <template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60"
								:changeText="$t('login.codeChangeText')"></u-code>
							<view class="setButton" @tap.stop="getCode"
								style="width: 240rpx;height: 55rpx;background: rgba(6, 193, 104, 0.1);border-radius: 28rpx;">
								<text style="color: #06C168;" class="font-400 text-df">{{tips}}</text>
							</view>
						</template> -->
					</u-input>

					<view v-if="codeFlag" class="setButton" @tap.stop="getCode" style="color: #06C168;">
						{{$t('login.getCode')}}
					</view>
					<view v-else class="setButton" style="color: #06C168;">
						{{time}}s
					</view>
				</u-form-item>
			</u-form>
			<text @tap="isShowAgree" class="cuIcon text-gray" style="font-size: 32rpx;"
				:class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'">
				<text>{{$t('login.agree')}}</text>
				<text class="text-black"
					@tap.stop="helper.routerNav('/pages/mine/xieyi',{type:'user'})">《{{$t('xieyi.user')}}》</text>
				<text class="text-black"
					@tap.stop="helper.routerNav('/pages/mine/xieyi',{type:'yinsi'})">《{{$t('xieyi.yinsi')}}》</text>
			</text>
		</view>
		<view style="position: fixed;bottom: 120rpx;left: 25rpx;right: 25rpx;">
			<view class="setButton" style="height: 90rpx;background: #06C168;border-radius: 40rpx;"
				@tap.stop="mobilelogin">
				<text class="font-400 text-df text-white">{{$t('login.text')}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mobilelogin,
		sendSms
	} from '@/apis'
	export default {
		data() {
			return {
				mobile: '',
				captcha: '',
				showAgree: false,
				// tips: this.$t('login.getCode'),
				tips: uni.getStorageSync('lang') == 'zh-cn' ? "Get verification code" : "Get verification code",
				codeFlag: true,
				time: 60,
			}
		},
		methods: {
			isShowAgree() {
				this.showAgree = !this.showAgree
			},
			async mobilelogin() {
				if (!this.showAgree) {
					uni.showToast({
						title: this.$t('message.warning'),
						icon: 'none'
					});
					return;
				}
				const res = await mobilelogin({
					mobile: '61' + this.mobile,
					captcha: this.captcha,
					pid: ''
				})
				console.log(res)
				this.helper.setStorageSync('token', res.userinfo.token)
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					uni.reLaunch({
						url: '/pages/tabBar/home'
					})
				})
			},
			async getCode() {
				if (this.mobile) {
					uni.showLoading({
						title: this.$t('login.sendCode')
					})
					const res = await sendSms({
						mobile: '61' + this.mobile,
					})
					let that = this
					setTimeout(async () => {
						uni.hideLoading();
						uni.$u.toast(that.$t('message.success'));
						that.codeFlag = false
						let timer = setInterval(function() {
							if (that.time == -1) {
								that.codeFlag = true
								clearInterval(timer)
							} else {
								that.time--
							}
						}, 1000)
					}, 1500);

				} else {
					this.helper.showToast(this.$t('login.placeholderAccount'))
				}
			},
			codeChange(text) {
				this.tips = text;
			},
		},
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-form-item:last-child {
		margin-top: 70rpx !important;
	}

	/deep/ .u-form-item__body__left {
		margin-bottom: 20rpx !important;
	}
</style>